<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover" />
		<meta name="apple-mobile-web-app-capable" content="yes" />
		<meta name="apple-mobile-web-app-status-bar-style" content="black" />
		<title>计划详情</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<style>
			/* * {
				touch-action: none;
			} */
			.mui-bar{
				-webkit-box-shadow: 0 0 0px rgba(0,0,0,.85);
			    box-shadow: 0 0 0px rgba(0,0,0,.85);
				    height: 50px;
			}
			.mui-title{
				line-height: 50px;
			    color: #fff;
			}
			.mui-icon-back:before, .mui-icon-left-nav:before {
			    content: '\e471';
			    color: #fff;
			}
			.mui-icon-plusempty:before {
			    content: '\e468';
			    color: #fff;
			}
		</style>
	</head>
	<body>
		<div style="height: 23px;width: 100%;background: #464646;position: fixed;top: 0;"></div>
		<header class="mui-bar mui-bar-nav" style="background: #464646;top: 22px;">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title"></h1>
		</header>
		<div class="mui-content mui-fullscreen" id="plans" style=" margin-top: 70px; padding-top: 0;">
			<!--计划内容-->
			<div class="mui-card">
				<div class="mui-card-header">控制设备</div>
				<div class="mui-card-content-inner">
					<div class="mui-card-content">
						{{controlinfo}}
					</div>
				</div>
			</div>
			<div class="mui-card" v-show="iscondition">
				<div class="mui-card-header">环境条件</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner" v-for="tar in conditionlist" style="border-bottom: 1px solid #CCCCCC;">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">指标名称: {{tar.targetname}}</li>
							<li class="mui-table-view-cell">限定阈值: {{tar.limitmin}} {{tar.targettypeunit}} ~ {{tar.limitmax}}
								{{tar.targettypeunit}}</li>
							<li class="mui-table-view-cell">开始时执行: {{tar.limitminstatename}}</li>
							<li class="mui-table-view-cell">结束时执行: {{tar.limitmaxstatename}}</li>
						</ul>
					</div>
				</div>
			</div>
			<div class="mui-card" v-show="isinterval">
				<div class="mui-card-header">时间条件</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<ul class="mui-table-view">
							<li class="mui-table-view-cell">
								执行模式: {{intervalinfo.repeatname}}
							</li>
							<li class="mui-table-view-cell">
								执行日期: {{new Date(intervalinfo.starttime).Format('yyyy-MM-dd')}}  {{intervalinfo.repeatname == "每日执行" ? "" : "~" + new Date(intervalinfo.endtime).Format('yyyy-MM-dd')}}
							</li>
							<li class="mui-table-view-cell">
								执行时间: {{intervalinfo.timestart}} ~ {{intervalinfo.timeend}}
							</li>
							<li class="mui-table-view-cell">
								开始时执行: {{intervalinfo.startstatename}}
							</li>
							<li class="mui-table-view-cell">
								结束时执行: {{intervalinfo.endstatename}}
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--激活/注销计划-->
			<!-- <div class="mui-card">
				<div class="mui-card-content-inner">
					<div class="mui-btn mui-btn-block mui-btn-blue" v-on:click="activePlan()" style="padding: 8px;">{{isalive?"注销":"激活"}}</div>
				</div>
			</div> -->
		</div>
		<script src="js/common.js"></script>
		<script src="js/config.js"></script>
		<script src="js/mui.js"></script>
		<script src="js/vue.min.js"></script>
		<script>
			mui.init();
			mui.plusReady(function(){
				var self=plus.webview.all();
				var old_back = mui.back;
				mui.back = function() {
					var wobj = plus.webview.getWebviewById("plan.html");//注意 HBuilder 是   1.html 的 ID  你如果1.html 有ID   要替换掉HBuilder，
					//wobj.reload(true);
					wobj.evalJS("vm_plan.LoadPlanData();")
					//console.log(JSON.stringify(wobj));
					old_back()
				}
			});
			var vm_plan = new Vue({
				el: "#plans",
				data: {
					planname: "", // 计划名称
					iscondition: false, // 是否显示条件计划
					isinterval: false, // 是否显示时间计划
					planid: 0, // 计划编号
					isalive: false, // 计划激活状态
					intervalinfo: {}, // 时间计划条件集合
					conditionlist: [], // 条件计划条件集合
					controlinfo: "", // 控制设备列表
				},
				methods: {
					activePlan: function() { // 激活/注销计划

					},
					loadPlan: function() {
						var d = setting.GetPlanDataConfig();
						//console.log(JSON.stringify(d))
						for (var i = 0; i < d.length; i++) {
							if (d[i].id == vm_plan.planid) {
								var ctrls = [];
								var tags = [];
								mui(".mui-title")[0].innerHTML = d[i].planname;
								vm_plan.isalive = d[i].isalive == "notactive" ? false : true;
								if (d[i].plantype == "condition") {
									vm_plan.iscondition = true;
									for (var j = 0; j < d[i].conditionlist.length; j++) {
										if (!ctrls.contains(d[i].conditionlist[j].controlname)) {
											ctrls.push(d[i].conditionlist[j].controlname);
										}
										if (!tags.contains(d[i].conditionlist[j].targetname)) {
											tags.push(d[i].conditionlist[j].targetname);
											vm_plan.conditionlist.push(d[i].conditionlist[j]);
										}
									}
									vm_plan.controlinfo = ctrls.join(',');
								} else {
									vm_plan.isinterval = true;
									for (var j = 0; j < d[i].intervallist.length; j++) {
										if (!ctrls.contains(d[i].intervallist[j].controlname))
											ctrls.push(d[i].intervallist[j].controlname);
										vm_plan.intervalinfo = d[i].intervallist[j];
									}
									vm_plan.intervalinfo.starttime = vm_plan.intervalinfo.starttime.substring(0,10);
									vm_plan.intervalinfo.endtime = vm_plan.intervalinfo.endtime.substring(0,10);
									vm_plan.controlinfo = ctrls.join(',');
								}
							}
						}
					}
				},
				mounted: function() {
					this.$nextTick(function() {
						console.log(GetQueryString("id"));
						vm_plan.planid = GetQueryString("id");
						vm_plan.loadPlan();
					});
				}
			});
		</script>
	</body>
</html>
